<template>
  <div>
    <el-card class="box-card" style="margin-top: 2vh">
      <template #header>
        <div class="card-header">
          <span>回复留言</span>
        </div>
      </template>
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        status-icon
        :rules="rules"
        label-width="80px"
        class="login-form"
        label-position="top"
      >
        <el-form-item label="内容">
          {{$route.query.content}}
        </el-form-item>
        <el-form-item label="回复" prop="content">
          <el-input v-model="ruleForm.content" />
        </el-form-item>
        <el-button id="submit-btn" type="primary" plain round @click="submitForm()">Submit</el-button>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import api from '../../api/data.js'
import { ElMessage } from 'element-plus'
export default {
  name: 'AdminBoardReply',
  components: {
  },
  data () {
    let validateContent = (rule, value, callback) => {
      const reg = /^[a-zA-Z0-9\u4e00-\u9fa5]{1,100}$/
      if (value === '') {
        callback(new Error('请输入内容'))
      } else if (!reg.test(value)) {
        callback(new Error('内容过长或格式有误'))
      } else {
        callback()
      }
    }
    return {
      ruleForm: {
        token: this.$store.state.token,
        pid: this.$route.query.pid,
        content: '',
      },
      rules: {
        content: [
          { validator: validateContent, trigger: 'blur' }
        ],
      }
  }},
  methods: {
    submitForm() {
      if (!this.$refs.ruleFormRef) return
      this.ruleForm.token = this.$store.state.token
      this.$refs.ruleFormRef.validate((valid) => {
        if (valid) {
          api.answerMessage(
            this.ruleForm
          ).then((res) => {
            if (res.code === 342) {
              this.$store.commit('logout')
              this.$store.commit('tokenError')
              this.$router.push({path: '/login'})
            } else if (res.code < 300) {
              ElMessage({
                message: res.message,
                type: 'success',
              })
              let temp = setInterval(() => {
                this.$router.push({path:'/admin/board'})
                clearInterval(temp)
              }, 1500)
            } else {
              ElMessage.error(res.message)
            }
          })
        } else {
          ElMessage.error('error submit!')
          return false;
        }
      });
    },
  },
  mounted () {
    
  }
}
</script>

<style scoped>
.box-card {
  margin-left: 25vw;
  width: 50vw;
}
</style>
